<template>
  <el-popover
    :width="width"
    :trigger="trigger"
    :offset="offset"
    :placement="placement"
    popper-class="popover__wrap__dark"
  >
    <ul class="ul-list" :style="`max-height: ${height}px;`">
      <li v-for="(item, index) in dataList" :key="index">
        <slot name="li-item" :item="item">
          {{ item }}
        </slot>
      </li>
    </ul>
    <div slot="reference" class="content-container">
      <span :style="`color: ${contentColor};`">{{ content }}</span>
    </div>
  </el-popover>
</template>
<script>
export default {
  props: {
    content: { // Popover 显示的内容
      type: String,
      default: ''
    },
    dataList: { // Popover 显示的列表
      type: Array,
      default: () => []
    },
    height: { // Popover 显示的列表的高度
      type: Number,
      default: 200
    },
    width: { // Popover 显示的列表的宽度
      type: Number,
      default: 200
    },
    trigger: { // Popover 显示的触发方式
      type: String,
      default: 'hover'
    },
    offset: { // Popover 显示的偏移量
      type: Number,
      default: 0
    },
    placement: { // Popover 显示的位置
      type: String,
      default: 'top'
    },
    contentWidth: { // Popover 显示的内容的宽度
      type: Number,
      default: 100
    },
    contentColor: { // Popover 显示的内容的颜色
      type: String,
      default: '#000'
    }
  }
}
</script>
<style lang="less" scoped>
.ul-list {
  overflow: hidden;
  overflow-y: auto;
  li {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
    font-size: 10px;
  }
  /* 滚动条背景颜色 - Webkit 浏览器 */
  &::-webkit-scrollbar {
    width: 9px;
  }
  /* 滚动条滑块背景颜色 - Webkit 浏览器 */
  &::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 10px;
    transition: background-color 0.3s; /* 添加过渡效果 */
    &:hover {
      background-color: #f5efef;
    }
  }
  /* 滚动条轨道背景颜色 - Webkit 浏览器 */
  &::-webkit-scrollbar-track {
    background-color: #7c7c7c;
  }
}
.content-container {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
